
<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view style="padding: 20px;">
			<h1 class="title" >年龄</h1>
			<view class="textBox">
				{{msg}} 
			</view>
			<view style="width: 100%;height: 350px;position: relative;">
				<view class="center"></view>
				<!-- <span class="cm">cm</span> -->
				<scroll-view  scroll-y="true" class="scroll-Y" :scroll-into-view="toView" @touchstart="start" @touchend="end"
					 :enable-flex="true" @scroll="slideScroll">
					 <view class="itemBox">
						 <span  v-for="(item,index) in options" :class="{item:true,item1:(item == centerIndex + 1 || item == centerIndex - 1),item2:item == centerIndex}" :id="'a'+index">{{item}}</span>
					 </view>
				</scroll-view>
			</view>
			<view style="width: 70%;height: 6vh;margin: 0 auto;" class="btnBox">
				<view style="width: 40%;height: 100%;float: left;border: 2px solid rgba(227, 227, 227, 1);border-radius: 48px;text-align: center;">
					<span style="font-size: 20px;color: rgba(133, 133, 133, 1);font-weight: 400;line-height: 6vh;">保密</span>
				</view>
				<view @click="goWeight()" style="width: 40%;height: 100%;float: right;background: linear-gradient(90deg, rgba(146, 163, 253, 1) 0%, rgba(157, 206, 255, 1) 100%);border-radius: 48px;text-align: center;">
					<span style="font-size: 20px;color: rgba(255, 255, 255, 1);font-weight: 400;line-height: 6vh;">确定</span>
				</view>
			</view>

			</view>

</template>


<script>
	export default {

		data() {
			return {
				userInfo:{},
				toView: 'a16',
				old: {
					scrollTop: 0
				},
				time:null,
				options:[],
				touch:false,
				stop:false,
				centerIndex:16,
				msg:"针对男/女及不同年龄段的训练方法有所差异，完善个人信息，更科学的获取运动指导",
			}
		},
		created() {
			this.initData()
			this.userInfo=uni.getStorageSync('userInfo')
		},
		methods: {
			start(){
				this.touch = true
			},
			end(){
				this.touch = false
			},
			initData(){
				this.options.push('a')
				this.options.push('a')
				this.options.push('a')
				for (var i = 16; i < 61; i++) {
					this.options.push(i)
				}
				this.options.push('a')
				this.options.push('a')
				this.options.push('a')
			},
			slideScroll(e){
				if(this.stop === true){
					this.stop = false
					return
				}
				// let item_2 = document.getElementById(`a${(e.detail.scrollTop/50 + 1).toFixed(0)}`)
				// item_2.classList.remove('item1')
				
				// let item_1 = document.getElementById(`a${(e.detail.scrollTop/50 + 2).toFixed(0)}`)
				// item_1.classList.add('item1')
				// item_1.classList.remove('item2')

				// let item = document.getElementById(`a${(e.detail.scrollTop/50 + 3).toFixed(0)}`)
				// item.classList.add('item2')
				
				// let item_3 = document.getElementById(`a${(e.detail.scrollTop/50 + 4).toFixed(0)}`)
				// item_3.classList.add('item1')
				// item_3.classList.remove('item2')
				
				// let item_4 = document.getElementById(`a${(e.detail.scrollTop/50 + 5).toFixed(0)}`)
				// item_4.classList.remove('item1')
				
				// let a = this.$refs[`a${(e.detail.scrollTop/50 + 3)}`]
				// console.log(a)
				
				this.centerIndex = Number((e.detail.scrollTop/50 ).toFixed(0))
				console.log(this.centerIndex)
				this.userInfo.memberUserAge=this.centerIndex+16
				console.log(this.userInfo.memberUserAge)
				this.toView = null
				
				if(this.time != null){
					clearTimeout(this.time)
					this.time = []
				}

				this.time = setTimeout(()=>{
					let result = 'a' + (e.detail.scrollTop/50 ).toFixed(0)
				    this.toView = result
					this.stop = true
				},300)
			},
			goWeight () {
				uni.setStorageSync('userInfo',this.userInfo)
				uni.navigateTo({
					url: '/pages/chooseLabel/weight',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
		}
	}
</script>

<style>
	.scroll-Y {
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.scroll-view-item {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
/* 	.item:first-child{
		margin-top: 150px;

	}
	.item:last-child{
		margin-bottom: 150px;
			height: 200px;
	} */
	.item{
		height: 50px;
		line-height: 50px;
		display: block;
		
	}
	.center{
		position: absolute;
		border-top: 1px solid aqua ;
		border-bottom: 1px solid aqua ;
		width: 40%;
		height: 50px;
		top: 150px;
		margin-left: 50%;
		transform: translate(-50%,0);
	}

	.item1{
		height: 50px;
		line-height: 50px;
		display: block;
		font-size: 30px;
		color: aqua;
	}
	.item2{
		height: 50px;
		line-height: 50px;
		display: block;
		font-size: 50px;
		color: aqua;
		position: relative;
	}
	.cm{
		position: absolute;
		right: 0;
		z-index: 1000;
		font-size: 20px;
		top: 165px;
		right: 20px;
		color: aqua;
	}
	.item:nth-child(1){
		color: white;
	}
	.item:nth-child(2){
		color: white;
	}
	.item:nth-child(3){
		color: white;
	}
	.item:nth-last-child(1){
		color: white
	}
	.item:nth-last-child(2){
		color: white
	}
	.item:nth-last-child(3){
		color: white
	}
	.textBox{
		font-size: 18px;
		color: gray;
		margin-top: 7%;
	}
	.title{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 36px;
		margin-top: 10%;
		font-weight: 700;
	}
	.btnBox{
		position: fixed;
		bottom: 6%;
		left:15%
	}
/* 	.itemBox{
		padding: 150px 0;
	} */
</style>




